<!--
 * @Author: jhw
 * @Date: 2025-08-05 10:05:26
 * @LastEditors: jhw
 * @LastEditTime: 2025-08-22 16:55:32
 * @Description: 组件市场布局组件
-->
<template>
  <div class="layout-container">
    <!-- 选择具体的业务组件 -->
    <div class="left">
      <slot />
    </div>
    <!-- 显示对应的业务组件 -->
    <div class="center">
      <Router-View v-slot="{ Component }">
        <component
          :is="Component"
          :componentId="materialStore.coms[materialStore.currentMaterialCom].id"
          :status="materialStore.coms[materialStore.currentMaterialCom].status"
          :serialNum="1"
        />
      </Router-View>
    </div>
    <!-- 编辑面板 -->
    <div class="right">
      <EditPannel :currentMaterialCom="currentMaterialCom" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { useMaterialStore } from '@/stores/useMaterial';
import EditPannel from '@/components/SurveyComs/EditItems/EditPannel.vue';
import { computed, provide } from 'vue';
import type { MaterialStore, OptionsStatus, PicLink, TypeStatus } from '@/types';
import { dispatch } from '@/stores/dispatch';

// 数据仓库
const materialStore = useMaterialStore() as unknown as MaterialStore;

// 当前选中的组件
const currentMaterialCom = computed(() => materialStore.coms[materialStore.currentMaterialCom]);

const updateStatus = (configKey: string, payload?: number | string | boolean | PicLink) => {
  // 修改仓库中的状态
  dispatch(
    materialStore,
    currentMaterialCom.value.status as unknown as OptionsStatus | TypeStatus,
    configKey,
    payload,
  );
};

const getLink = (link: PicLink) => {
  updateStatus('options', link);
};

provide('getLink', getLink);
provide('updateStatus', updateStatus);
</script>

<style scoped lang="scss">
.layout-container {
  @apply w-full flex items-start;
  width: 100%;
  // Header组件高度50px，h1高度50px，上下margin 20px，最后20px是额外多减去一部分，避免贴底
  height: calc(100vh - 100px - 40px - 20px);
  border: 1px solid var(--border-color);
  border-top-right-radius: var(--border-radius-lg);
  border-bottom-left-radius: var(--border-radius-lg);
  border-bottom-right-radius: var(--border-radius-lg);
}
.left {
  @apply w-240px text-center items-start p-16px flex flex-wrap justify-between;
}
.center {
  @apply w-660px p-24px overflow-y-scroll;
  // 多减去的60px是上下的padding，，最后20px是额外多减去一部分，避免贴底
  height: calc(100vh - 100px - 40px - 22px);
  border-left: 1px solid var(--border-color);
}
.right {
  @apply w-300px overflow-y-scroll;
  height: calc(100vh - 100px - 40px - 20px);
  border-left: 1px solid var(--border-color);
}
</style>
